<template>
    <div class="prize-model">
        {{ getPrizeModel }}
        <el-form id="contentForm"
                 :model="contentForm"
                 ref="contentForm"
                 :label-width="labelWidth"
                 class="inline-form">
            <el-form-item label="奖品名称"
                          prop="prizeName">
                <el-input v-model="contentForm.prizeName"
                          name="prizeName"></el-input>
            </el-form-item>
            <el-form-item label="奖品类型"
                          prop="prizeType">
                <el-select v-model="contentForm.prizeType">
                    <el-option label="充值卡"
                               value="RECHARGE_CARD"></el-option>
                    <el-option label="流量包"
                               value="FLOW_PACKAGE"></el-option>
                    <el-option label="电子优惠券"
                               value="ELECTRONIC_COUPON"></el-option>
                    <el-option label="实物礼品"
                               value="ENTITY_GIFFT"></el-option>
                    <el-option label='积分'
                               value="CLUB_INTEGRAL"></el-option>
                    <el-option label='权益会员直充'
                               value="QY_RECHARGE"></el-option>
                    <el-option label="谢谢参与"
                               value="THANKS_PARTICIPATE"></el-option>
                </el-select>
                <el-input style="display: none;"
                          v-model="contentForm.prizeType"
                          name="prizeType"></el-input>
            </el-form-item>
            <el-form-item label="奖品面额"
                          v-if="contentForm.prizeType =='RECHARGE_CARD' || contentForm.prizeType =='FLOW_PACKAGE' || contentForm.prizeType =='CLUB_INTEGRAL'">
                <el-input style="width: 83%;"
                          v-model="contentForm.bill"
                          name="bill"></el-input>
                <span v-if="contentForm.prizeType == 'CLUB_INTEGRAL'">积分</span><span
                v-if="contentForm.prizeType == 'RECHARGE_CARD'">分</span><span
                v-if="contentForm.prizeType == 'FLOW_PACKAGE'">M</span>
            </el-form-item>
            <el-form-item label="券码跳转链接"
                          v-if="contentForm.prizeType == 'ELECTRONIC_COUPON'">
                <el-input v-model="contentForm.url"
                          name="url"></el-input>
            </el-form-item>
            <el-form-item label="权益会员产品" prop="productCode" v-if="contentForm.prizeType == 'QY_RECHARGE'">
                <el-select v-model="contentForm.productCode">
                    <el-option label="PPTV7天会员" value="VIDEO-PPTVD-7"></el-option>
                    <el-option label="芒果TV7天会员" value="VIDEO-MANGGUOD-7"></el-option>
                    <el-option label="腾讯视频超级影视VIP7天会员" value="VIDEO-QQCJYSD-7"></el-option>
                    <el-option label="优酷视频7天会员" value="VIDEO-YOUKUD-7"></el-option>
                </el-select>
                <el-input style="display: none;" v-model="contentForm.productCode" name="productCode"></el-input>
            </el-form-item>
            <el-form-item label="奖项名称"
                          prop="prizeGradeName">
                <el-input v-model="contentForm.prizeGradeName"
                          name="prizeGradeName"></el-input>
            </el-form-item>
            <el-form-item label="奖品数量"
                          prop="prizeNum">
                <el-input v-model="contentForm.prizeNum"
                          name="prizeNum"></el-input>
            </el-form-item>

            <el-form-item label="奖品图片"
                          class="img-label"
                          v-if="!doll">
                <div class="l"
                     style="margin-right: 50px;">
                    <input id="wap-file"
                           type="file"
                           name="wapImageFile"/>
                    <span>wap</span>
                </div>
                <div class="l">
                    <input id="pc-file"
                           type="file"
                           name="pcImageFile"/>
                    <span>pc</span>
                </div>
            </el-form-item>
            <template v-if="doll">
                <el-form-item label="奖品类型">
                    <el-radio-group name="prizeClawType"
                                    v-model="contentForm.prizeClawType">
                        <el-radio label="low">低配</el-radio>
                        <el-radio label="high">高配</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="奖品图片"
                              class="img-label">
                    <div class="l"
                         style="margin-right: 50px;">
                        <input id="wap-file"
                               type="file"
                               name="wapImageFile"/>
                        <!-- <span>wap</span> -->
                    </div>
                </el-form-item>
            </template>
            <el-form-item label="中奖概率"
                          prop="prizeProbability">
                <el-input style="width: 85%;"
                          v-model="contentForm.prizeProbability"
                          name="prizeProbability"></el-input>
                %
            </el-form-item>
            <el-form-item label="最大中奖次"
                          prop="effectiveTimes">
                <el-input v-model="contentForm.effectiveTimes"
                          name="effectiveTimes"></el-input>
                <span>备注：若有安慰奖，其奖计算在内</span>
            </el-form-item>
            <el-form-item label="中奖提示"
                          prop="prompt">
                <el-input v-model="contentForm.prompt"
                          name="prompt"></el-input>
            </el-form-item>
            <el-form-item label="有效期"
                          prop="effectiveTime">
                <el-date-picker v-model="contentForm.effectiveTime"
                                type="date"
                                @change="renderDate"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
                <el-input name="effectiveTime"
                          v-model="contentForm.effectiveTime"
                          style="display: none;"></el-input>
            </el-form-item>
            <el-form-item label="奖品等级"
                          prop="prizeGrade">
                <el-input v-model="contentForm.prizeGrade"
                          name="prizeGrade"></el-input>
            </el-form-item>
            <el-form-item label="奖品顺序"
                          prop="prizeSort">
                <el-input v-model="contentForm.prizeSort"
                          name="prizeSort"></el-input>
            </el-form-item>
            <el-form-item label="兑换须知"
                          prop="notes">
                <quill-editor style="width: 600px;"
                              v-model="htmlCon2"
                              ref="myTextEditor"
                              @change="exchangeChange($event)"
                              :options="editorOption"></quill-editor>
                <el-input type="hidden"
                          v-model="contentForm.notes"
                          name="notes"></el-input>
            </el-form-item>
            <el-form-item label="奖品说明">
                <quill-editor style="width: 600px;"
                              v-model="htmlCon"
                              ref="myTextEditor"
                              @change="descriptionChange($event)"
                              :options="editorOption"></quill-editor>
                <el-input type="hidden"
                          v-model="contentForm.description"
                          name="description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           @click="submitPrizeHandle()">确定
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import {parseTime} from '@/utils/index'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import {quillEditor} from 'vue-quill-editor'
    import request from '@/utils/request'

    export default {
        name: 'prizeModel',
        props: ['json'],
        data() {
            return {
                doll: false,
                htmlCon: '',
                htmlCon2: '',
                contentForm: {
                    prizeClawType: '',
                    // /////奖品设置
                    prizeType: 'RECHARGE_CARD',
                    productCode: '',
                    url: '',
                    prizeName: '',
                    prizeGradeName: '',
                    prizeNum: '',
                    prizeProbability: '',
                    pcImageFile: '',
                    wapImageFile: '',
                    effectiveTimes: '',
                    effectiveTime: '',
                    prompt: '',
                    notes: '',
                    prizeGrade: '',
                    prizeSort: 1,
                    bill: '',
                    wapImage: '',
                    description: ''
                },
                editFlag: false,
                baseForm: {},
                date: '',
                resetForm: {},
                tabIndex: 2,
                labelWidth: '150px',
                content: '',
                editorOption: {
                    placeholder: 'Hello World'
                }
            }
        },
        mounted() {
            if (this.json.templateMark === 'prizeclaw') {
                this.doll = true
            } else {
                this.doll = false
            }
            this.$nextTick(function () {
                this.resetForm = JSON.parse(JSON.stringify(this.contentForm))
            })
        },
        computed: {
            getPrizeModel: function () {
                if (this.json.pageModel == 'prizeSet') {
                    const _this = this
                    if (this.json.prizeId) {
                        _this.editFlag = true
                        request({
                            url: '/activityConsole/activity/activityInfoId/' + this.json.activityId + '/prize/id/' + this.json.prizeId,
                            method: 'get'
                        }).then(res => {
                            _this.baseForm = res.data
                            _this.date = parseTime(res.data.effectiveTime)
                            _this.renderDate(_this.date)
                            _this.htmlCon = _this.baseForm.description
                            _this.htmlCon2 = _this.baseForm.notes
                            return _this.contentForm = _this.baseForm
                        })
                    }
                }
            }
        },
        components: {
            quillEditor
        },
        methods: {
            descriptionChange(event) {
                this.contentForm.description = event.html
            },
            exchangeChange(event) {
                this.contentForm.notes = event.html
            },
            renderDate(date) {
                this.contentForm.effectiveTime = date
                this.baseForm.effectiveTime = date
            },
            submitPrizeHandle(index) {
                const _this = this
                const submitForm = _this.contentForm
                var formData = new FormData(document.querySelector('#contentForm'))
                if (submitForm.prizeType === '') {
                    this.$message({type: 'error', message: '奖品类型必填'})
                    return
                }
                if (submitForm.prizeName === '') {
                    this.$message({type: 'error', message: '奖品名称必填'})
                    return
                }
                if (submitForm.prizeGradeName === '') {
                    this.$message({type: 'error', message: '奖项名称必填'})
                    return
                }
                if (submitForm.prizeType === '') {
                    this.$message({type: 'error', message: '奖品类型必填'})
                    return
                }
                if (submitForm.prizeNum === '') {
                    this.$message({type: 'error', message: '奖品数量必填'})
                    return
                }
                if (submitForm.prizeProbability === '') {
                    this.$message({type: 'error', message: '中奖概率必填'})
                    return
                }
                if (submitForm.effectiveTimes === '') {
                    this.$message({type: 'error', message: '每人中奖次数必填'})
                    return
                }
                if (submitForm.notes === '') {
                    this.$message({type: 'error', message: '兑换须知必填'})
                    return
                }
                if (submitForm.prompt === '') {
                    this.$message({type: 'error', message: '中奖提示必填'})
                    return
                }
                if (!submitForm.effectiveTime) {
                    this.$message({type: 'error', message: '有效期必填'})
                    return
                }
                // formData.append("prizeGrade", parseInt(index) + 1);
                if (submitForm.prizeGrade === '') {
                    this.$message({type: 'error', message: '奖品等级必填'})
                    return
                }
                if (submitForm.prizeSort === '') {
                    this.$message({type: 'error', message: '奖品顺序必填'})
                    return
                }
                if (_this.contentForm.prizeClawType) {
                    formData.append('prizeClawType', _this.contentForm.prizeClawType)
                }

                if (_this.editFlag && _this.contentForm.id && _this.contentForm.id != 'undefined') {
                    formData.append('id', _this.contentForm.id)
                    formData.append('pcImage', _this.contentForm.pcImage)
                    formData.append('wapImage', _this.contentForm.wapImage)
                    formData.append('version', _this.contentForm.version)
                }

                request({
                    url: '/activityConsole/activity/activityInfoId/' + _this.json.activityId + '/prize',
                    method: 'post',
                    data: formData,
                    postType: 'form'
                }).then(res => {
                    if (res.status === '200') {
                        if (!this.doll) {
                            // var wapFile = document.getElementById('wap-file')
                            var pcFile = document.getElementById('pc-file')
                            // wapFile.outerHTML = wapFile.outerHTML
                            pcFile.outerHTML = pcFile.outerHTML
                        }
                        var wapFile = document.getElementById('wap-file')
                        wapFile.outerHTML = wapFile.outerHTML
                        this.htmlCon = ''
                        this.htmlCon2 = ''
                        this.contentForm.description = ''
                        this.contentForm.notes = ''
                        _this.contentForm = JSON.parse(JSON.stringify(this.resetForm))
                        _this.$emit('listenPrizeEdit', {hideSetFlag: true, pageModel: 'prizeSet', prizeId: null})
                    }
                    const state = res.status === '200' ? 'success' : 'error'
                    _this.$message({
                        type: state,
                        message: res.description
                    })
                }).catch(err => {
                    console.log(err)
                })
            },
            handleClick(tab, event) {
                // console.log(tab, event);
                /*
                * 奖品 tab 切换
                * 奖品配置内容一样  即  form  提交一样 内容一样
                * */
            }
        }
    }
</script>
<style scoped>
</style>
